<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">账号</label>
        <input id="username" v-model="username" type="text" placeholder="请输入账号" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <div style="position: relative;">
          <input
            id="password"
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            required
            style="padding-right: 36px;"
          />
          <span
            @click="showPassword = !showPassword"
            style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none; color: #888;"
            :title="showPassword ? '隐藏密码' : '显示密码'"
          >
            {{ showPassword ? '🙈' : '👁️' }}
          </span>
        </div>
      </div>
      <button type="submit">登录</button>
      <div v-if="error" class="error">{{ error }}</div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const username = ref('')
const password = ref('')
const error = ref('')
const showPassword = ref(false)
const router = useRouter()

const userStore = useUserStore()

function handleLogin() {
  if (username.value === 'dx' && password.value === 'dx@321') {
    userStore.setUserInfo({ id: '1', name: username.value })
    userStore.setPermissions(['admin', 'player:add', 'player:edit', 'player:delete', 'player:view', 'grouping:view'])
    error.value = ''
    router.push('/')
  } else if (username.value === 'dxfans' && password.value === 'dxfans') {
    userStore.setUserInfo({ id: '2', name: username.value })
    userStore.setPermissions(['player:view', 'grouping:view'])
    error.value = ''
    router.push('/')
  } else {
    error.value = '账号或密码错误'
  }
}
</script>

<style scoped>
.login-container {
  max-width: 350px;
  margin: 100px auto;
  padding: 32px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.form-group {
  margin-bottom: 18px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
button:hover {
  background: #369870;
}
.error {
  color: #e74c3c;
  margin-top: 10px;
  text-align: center;
}
</style>
